<template>
	<view class="content">
		<view class="position-fixed left-0 w-100" :style="{top: topFixed, 'z-index': 100}">
			<u-tabs :list="tabs" :is-scroll="false" activeColor="var(--mainColor)" :current="current" @change="change"></u-tabs>
		</view>
		<mescroll-body ref="mescrollRef" top="80rpx" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="u-m-24 bg-white rounded-10" v-for="(item,index) in orderList" :key="index">
				<view class="u-p-20">
					<view class="flex align-center u-p-b-20 justify-between u-border-bottom">
						<text>订单号：{{item.order_no}}</text>
						<text class="text-danger">{{item.showText}}</text>
					</view>
					<order-item-list :item="item"></order-item-list>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	const status = {
		0: 'all',
		1: 'waitpay',
		2: 'waitfreight',
		3: 'waitreceipt',
		4: 'appraise',
	}
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { OrderCenterApi } from '@/api/serves.js'
	import formartOrderStatus from './filterOrder.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs: [
					{
						name: '全部',
						orderList: []
					}, 
					{
						name: '待付款',
						orderList: []
					}, 
					{
						name: '待发货',
						orderList: []
					}, 
					{
						name: '待收货',
						orderList: []
					}, 
					{
						name: '待评价',
						orderList: []
					}
				],
				current: 0,
				infoList: [],
				orderType: 1
			}
		},
		computed: {
			topFixed() {
				return  this.windowTop + 'px'
			},
			orderList() {
				console.log('当前订单列表',this.tabs[this.current].orderList);
				return this.tabs[this.current].orderList
			},
		},
		onUnload() {
			uni.$off('orderClick')
		},
		// #ifdef APP-PLUS
			onLoad(option) {
				// console.log('2',option);
			    // this.mescroll.resetUpScroll()  // 打开这个订单列表会默认显示线上商品的列表
				uni.$on('orderClick',()=> {
					console.log(1);
					this.mescroll.resetUpScroll()
				})
				this.current = option.type || 0
				this.orderType = option.orderType || 1
			},
		// #endif
		// #ifndef APP-PLUS
			onShow() {
				let {type,orderType} = this.$mp.query   // app内
				// this.mescroll.resetUpScroll()  // 打开这个订单列表会默认显示线上商品的列表
				uni.$on('orderClick',()=> {
					this.mescroll.resetUpScroll()
				})
				this.current = type || 0
				this.orderType = orderType || 1
			},
		// #endif
		
		methods: {
			// 下拉刷新回掉
			downCallback() {
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {	
				OrderCenterApi.orderMy({status: status[this.current], page: page.num, order_type: this.orderType*1 }).then(res=> {
					console.log('订单列表', res);
					if(res.code == 1){
						let result = res.data
						// result.forEach(item=> {
						// 	item.showOrderText = formartOrderStatus(item) || ''
						// })
						let curTab = this.tabs[this.current]
						if(page.num == 1) curTab.orderList = []; //如果是第一页需手动制空列表
						curTab.orderList = curTab.orderList.concat(result); //追加新数据
						this.mescroll.endByPage(result.length, result.totalpage)
						
						// console.log();
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			change(index) {
				this.current = index
				this.mescroll.resetUpScroll() 
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
